<template>
    <div class="pnf">
        <h1>友情提醒</h1>
        <h3>当前页面不存在，请访问其他页面</h3>
        <button @click="jumpUrl">返回主页，{{ countdown }}秒后自动返回</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            countdown: 5,
            timer: null
        }
    },
    methods: {
        jumpUrl() {
            // 跳转到主页
            this.$router.push('/Layout/welcome')
        }
    },
    created() {
        this.timer = setInterval(() => {
            if (this.countdown == 0) this.jumpUrl()
            else this.countdown--
        }, 1000);
    },
    destroyed() {
        if (this.timer) clearInterval(this.timer)
    },
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.pnf {
    width: 100vw;
    height: 100vh;
    background-color: $main_color;
    @include flex();
    color: #fff;
    flex-direction: column;

    h1 {
        margin: 15px 0;
    }

    button {
        margin: 10px 0;
        background-color: #fff;
        border: none;
        padding: 15px;
        border-radius: 10px;
        color: $main_color;
    }
}
</style>